React Maxsus Hook Kompozitsiyasi: Murakkab Mantiq Abstraksiyasini O'zlashtirish

React maxsus hooklari (custom hooks) sizning React ilovalaringizda holatga ega mantiqni inkapsulyatsiya qilish va qayta ishlatish uchun kuchli vositadir. Biroq, ilovalaringiz murakkablashgan sari, maxsus hooklaringiz ichidagi mantiq ham murakkablashadi. Bu tushunish, sinovdan o'tkazish va qo'llab-quvvatlash qiyin bo'lgan monolit hooklarga olib kelishi mumkin. Maxsus hook kompozitsiyasi murakkab mantiqni kichikroq, boshqarilishi oson va qayta ishlatiladigan hooklarga ajratish imkonini berib, bu muammoning yechimini taqdim etadi.

Maxsus Hook Kompozitsiyasi Nima?

Maxsus hook kompozitsiyasi - bu murakkabroq funksionallikni yaratish uchun bir nechta kichikroq maxsus hooklarni birlashtirish amaliyotidir. Hamma narsani bajaradigan bitta, katta hook yaratish o'rniga, siz har biri mantiqning ma'lum bir jihati uchun mas'ul bo'lgan bir nechta kichikroq hooklarni yaratasiz. Keyin bu kichikroq hooklar kerakli funksionallikka erishish uchun birgalikda tuzilishi mumkin.

Buni LEGO g'ishtlari bilan qurishga o'xshatish mumkin. Har bir g'isht (kichik hook) o'ziga xos funksiyaga ega va siz ularni turli yo'llar bilan birlashtirib, murakkab tuzilmalarni (kattaroq xususiyatlarni) yaratasiz.

Maxsus Hook Kompozitsiyasining Afzalliklari

• Kodning Qayta Ishlatiluvchanligini Oshirish: Kichikroq, aniq maqsadli hooklar turli komponentlar va hatto turli loyihalar bo'ylab qayta ishlatish uchun ancha qulaydir.
• Qo'llab-quvvatlashning Yaxshilanishi: Murakkab mantiqni kichikroq, mustaqil birliklarga bo'lish kodni tushunish, tuzatish va o'zgartirishni osonlashtiradi. Bitta hookdagi o'zgarishlar ilovangizning boshqa qismlariga ta'sir qilish ehtimoli kamroq bo'ladi.
• Sinovdan O'tkazish Imkoniyatining Oshishi: Kichikroq hooklarni alohida sinovdan o'tkazish osonroq, bu esa yanada mustahkam va ishonchli kodga olib keladi.
• Kodning Yaxshiroq Tashkil Etilishi: Kompozitsiya modulli va tartibli kod bazasini rag'batlantiradi, bu esa ilovangizning turli qismlari o'rtasidagi munosabatlarni tushunish va kezishni osonlashtiradi.
• Kod Takrorlanishining Kamayishi: Umumiy mantiqni qayta ishlatiladigan hooklarga chiqarish orqali siz kod takrorlanishini minimallashtirasiz, bu esa ixchamroq va qo'llab-quvvatlash oson bo'lgan kod bazasiga olib keladi.

Maxsus Hook Kompozitsiyasini Qachon Ishlatish Kerak

Maxsus hook kompozitsiyasidan foydalanishni quyidagi hollarda ko'rib chiqishingiz kerak:

• Bitta maxsus hook juda katta va murakkab bo'lib ketganda.
• Bir nechta maxsus hooklar yoki komponentlarda o'xshash mantiqni takrorlayotganingizni sezsangiz.
• Maxsus hooklaringizni sinovdan o'tkazish imkoniyatini yaxshilamoqchi bo'lsangiz.
• Yanada modulli va qayta ishlatiladigan kod bazasini yaratmoqchi bo'lsangiz.

Maxsus Hook Kompozitsiyasining Asosiy Tamoyillari

Maxsus hook kompozitsiyasiga yondashuvingizda sizga yo'l ko'rsatuvchi ba'zi asosiy tamoyillar:

• Yagona Mas'uliyat Tamoyili: Har bir maxsus hook yagona, aniq belgilangan mas'uliyatga ega bo'lishi kerak. Bu ularni tushunish, sinovdan o'tkazish va qayta ishlatishni osonlashtiradi.
• Mas'uliyatlarni Ajratish: Mantiqingizning turli jihatlarini turli hooklarga ajrating. Masalan, bitta hook ma'lumotlarni olish uchun, boshqasi holatni boshqarish uchun va yana biri qo'shimcha effektlarni (side effects) boshqarish uchun bo'lishi mumkin.
• Kompozitsiyalash Imkoniyati: Hooklaringizni boshqa hooklar bilan osonlikcha birlashtiriladigan qilib loyihalashtiring. Bu ko'pincha boshqa hooklar tomonidan ishlatilishi mumkin bo'lgan ma'lumotlar yoki funksiyalarni qaytarishni o'z ichiga oladi.
• Nomlash Qoidalari: Hooklaringizning maqsadi va funksionalligini ko'rsatish uchun aniq va tavsiflovchi nomlardan foydalaning. Umumiy qoida - hook nomlarini `use` prefiksi bilan boshlash.

Umumiy Kompozitsiya Patternlari

Maxsus hooklarni kompozitsiya qilish uchun bir nechta patternlardan foydalanish mumkin. Quyida eng keng tarqalganlaridan ba'zilari keltirilgan:

1. Oddiy Hook Kompozitsiyasi

Bu kompozitsiyaning eng oddiy shakli bo'lib, unda bitta hook shunchaki boshqa hookni chaqiradi va uning qaytargan qiymatidan foydalanadi.

Misol: Tasavvur qiling, sizda foydalanuvchi ma'lumotlarini olish uchun bitta hook va sanalarni formatlash uchun boshqa hook mavjud. Siz bu hooklarni birlashtirib, foydalanuvchi ma'lumotlarini oladigan va foydalanuvchining ro'yxatdan o'tgan sanasini formatlaydigan yangi hook yaratishingiz mumkin.

            
import { useState, useEffect } from 'react';

function useUserData(userId) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [userId]);

  return { data, loading, error };
}

function useFormattedDate(dateString) {
  try {
    const date = new Date(dateString);
    const formattedDate = date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' });
    return formattedDate;
  } catch (error) {
    console.error("Error formatting date:", error);
    return "Invalid Date";
  }
}

function useUserWithFormattedDate(userId) {
  const { data, loading, error } = useUserData(userId);
  const formattedRegistrationDate = data ? useFormattedDate(data.registrationDate) : null;

  return { ...data, formattedRegistrationDate, loading, error };
}

export default useUserWithFormattedDate;

            

              
                Copy
              
            
          

Tushuntirish:

• useUserData API'dan foydalanuvchi ma'lumotlarini oladi.
• useFormattedDate sana satrini foydalanuvchiga qulay formatga o'tkazadi. U sanani o'qishdagi (parsing) potensial xatoliklarni ohista bartaraf etadi. `toLocaleDateString` ga berilgan `undefined` argumenti formatlash uchun foydalanuvchining mahalliy sozlamalarini (locale) ishlatadi.
• useUserWithFormattedDate ikkala hookni ham birlashtiradi. U avval useUserData yordamida foydalanuvchi ma'lumotlarini oladi. Keyin, agar ma'lumotlar mavjud bo'lsa, u registrationDate'ni formatlash uchun useFormattedDate'dan foydalanadi. Nihoyat, u asl foydalanuvchi ma'lumotlarini formatlangan sana, yuklanish holati va har qanday potensial xatoliklar bilan birga qaytaradi.

2. Umumiy Holat Bilan Hook Kompozitsiyasi

Bu patternda bir nechta hooklar bir xil holatni (state) bo'lishadi va o'zgartiradi. Bunga useContext yordamida yoki holat va uni o'zgartiruvchi funksiyalarni (setter functions) hooklar o'rtasida uzatish orqali erishish mumkin.

Misol: Ko'p bosqichli forma yaratayotganingizni tasavvur qiling. Har bir bosqich o'ziga xos kiritish maydonlari va validatsiya mantiqini boshqarish uchun o'z hookiga ega bo'lishi mumkin, ammo ularning barchasi useReducer va useContext yordamida ota-ona hook tomonidan boshqariladigan umumiy forma holatini bo'lishadi.

            
import React, { createContext, useContext, useReducer } from 'react';

// Define the initial state
const initialState = {
  step: 1,
  name: '',
  email: '',
  address: ''
};

// Define the actions
const ACTIONS = {
  NEXT_STEP: 'NEXT_STEP',
  PREVIOUS_STEP: 'PREVIOUS_STEP',
  UPDATE_FIELD: 'UPDATE_FIELD'
};

// Create the reducer
function formReducer(state, action) {
  switch (action.type) {
    case ACTIONS.NEXT_STEP:
      return { ...state, step: state.step + 1 };
    case ACTIONS.PREVIOUS_STEP:
      return { ...state, step: state.step - 1 };
    case ACTIONS.UPDATE_FIELD:
      return { ...state, [action.payload.field]: action.payload.value };
    default:
      return state;
  }
}

// Create the context
const FormContext = createContext();

// Create a provider component
function FormProvider({ children }) {
  const [state, dispatch] = useReducer(formReducer, initialState);

  const value = {
    state,
    dispatch,
    nextStep: () => dispatch({ type: ACTIONS.NEXT_STEP }),
    previousStep: () => dispatch({ type: ACTIONS.PREVIOUS_STEP }),
    updateField: (field, value) => dispatch({ type: ACTIONS.UPDATE_FIELD, payload: { field, value } })
  };

  return (
    
      {children}
    
  );
}

// Custom hook for accessing the form context
function useFormContext() {
  const context = useContext(FormContext);
  if (!context) {
    throw new Error('useFormContext must be used within a FormProvider');
  }
  return context;
}

// Custom hook for Step 1
function useStep1() {
  const { state, updateField } = useFormContext();

  const updateName = (value) => updateField('name', value);

  return {
    name: state.name,
    updateName
  };
}

// Custom hook for Step 2
function useStep2() {
  const { state, updateField } = useFormContext();

  const updateEmail = (value) => updateField('email', value);

  return {
    email: state.email,
    updateEmail
  };
}

// Custom hook for Step 3
function useStep3() {
  const { state, updateField } = useFormContext();

  const updateAddress = (value) => updateField('address', value);

  return {
    address: state.address,
    updateAddress
  };
}

export { FormProvider, useFormContext, useStep1, useStep2, useStep3 };

            

              
                Copy
              
            
          

Tushuntirish:

• Forma holati va `dispatch` funksiyasini saqlash uchun createContext yordamida FormContext yaratiladi.
• formReducer `useReducer` yordamida forma holati yangilanishlarini boshqaradi. Holatni o'zgartirish uchun NEXT_STEP, PREVIOUS_STEP va UPDATE_FIELD kabi harakatlar (actions) aniqlangan.
• FormProvider komponenti o'zining ichidagi komponentlarga (children) forma kontekstini taqdim etadi, bu esa holat va `dispatch`ni formaning barcha bosqichlari uchun mavjud qiladi. Shuningdek, u harakatlarni yuborishni soddalashtirish uchun `nextStep`, `previousStep` va `updateField` uchun yordamchi funksiyalarni ham taqdim etadi.
• useFormContext hooki komponentlarga forma konteksti qiymatlariga kirish imkonini beradi.
• Har bir bosqich (useStep1, useStep2, useStep3) o'z bosqichiga tegishli kiritishni boshqarish uchun o'z hookini yaratadi va uni yangilash uchun holat va `dispatch` funksiyasini olish uchun useFormContext'dan foydalanadi. Har bir bosqich faqat o'sha bosqichga tegishli ma'lumotlar va funksiyalarni taqdim etib, yagona mas'uliyat tamoyiliga amal qiladi.

3. Hayot Siklini Boshqarish Bilan Hook Kompozitsiyasi

Ushbu pattern komponentning hayot siklining turli bosqichlarini, masalan, o'rnatish (mounting), yangilash (updating) va o'chirishni (unmounting) boshqaradigan hooklarni o'z ichiga oladi. Bunga ko'pincha kompozitsiyalangan hooklar ichida useEffect yordamida erishiladi.

Misol: Online/offline holatini kuzatishi va o'chirilganda (unmount) ba'zi tozalash ishlarini bajarishi kerak bo'lgan komponentni ko'rib chiqing. Siz bu vazifalarning har biri uchun alohida hooklar yaratib, so'ng ularni birlashtirishingiz mumkin.

            
import { useState, useEffect } from 'react';

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }

    function handleOffline() {
      setIsOnline(false);
    }

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title;

    return () => {
      document.title = 'Original Title'; // Revert to a default title on unmount
    };
  }, [title]);
}

function useAppLifecycle(title) {
  const isOnline = useOnlineStatus();
  useDocumentTitle(title);

  return isOnline; // Return the online status
}

export { useAppLifecycle, useOnlineStatus, useDocumentTitle };

            

              
                Copy
              
            
          

Tushuntirish:

• useOnlineStatus online va offline hodisalari yordamida foydalanuvchining online holatini kuzatib boradi. useEffect hooki komponent o'rnatilganda hodisa tinglovchilarini sozlaydi va o'chirilganda ularni tozalaydi.
• useDocumentTitle hujjat sarlavhasini yangilaydi. Shuningdek, u komponent o'chirilganda sarlavhani standart qiymatga qaytaradi, bu esa keraksiz sarlavha muammolarining oldini oladi.
• useAppLifecycle ikkala hookni ham birlashtiradi. U foydalanuvchining online ekanligini aniqlash uchun useOnlineStatus'dan va hujjat sarlavhasini o'rnatish uchun useDocumentTitle'dan foydalanadi. Birlashtirilgan hook online holatini qaytaradi.

Amaliy Misollar va Qo'llash Holatlari

1. Xalqarolashtirish (i18n)

Tarjimalarni boshqarish va mahalliy sozlamalarni (locale) almashtirish murakkablashishi mumkin. Vazifalarni ajratish uchun hook kompozitsiyasidan foydalanishingiz mumkin:

• useLocale(): Joriy mahalliy sozlamani (locale) boshqaradi.
• useTranslations(): Joriy mahalliy sozlama uchun tarjimalarni oladi va taqdim etadi.
• useTranslate(key): Tarjima kalitini oladigan va tarjimalarga kirish uchun useTranslations hookidan foydalanib, tarjima qilingan satrni qaytaradigan hook.

Bu sizga ilovangiz bo'ylab osongina mahalliy sozlamalarni almashtirish va tarjimalarga kirish imkonini beradi. Tarjima mantiqini boshqarish uchun i18next kabi kutubxonalarni maxsus hooklar bilan birgalikda ishlatishni ko'rib chiqing. Masalan, useTranslations tanlangan mahalliy sozlamaga asoslanib, turli tillardagi JSON fayllaridan tarjimalarni yuklashi mumkin.

2. Forma Validatsiyasi

Murakkab formalar ko'pincha keng qamrovli validatsiyani talab qiladi. Qayta ishlatiladigan validatsiya mantiqini yaratish uchun hook kompozitsiyasidan foydalanishingiz mumkin:

• useInput(initialValue): Bitta kiritish maydonining holatini boshqaradi.
• useValidator(value, rules): Bitta kiritish maydonini qoidalar to'plami (masalan, majburiy, email, minLength) asosida tekshiradi.
• useForm(fields): Har bir maydon uchun useInput va useValidator'ni birlashtirib, butun formaning holati va validatsiyasini boshqaradi.

Ushbu yondashuv kodni qayta ishlatish imkoniyatini oshiradi va validatsiya qoidalarini qo'shish yoki o'zgartirishni osonlashtiradi. Formik yoki React Hook Form kabi kutubxonalar tayyor yechimlarni taqdim etadi, ammo ularni maxsus validatsiya ehtiyojlari uchun maxsus hooklar bilan to'ldirish mumkin.

3. Ma'lumotlarni Olish va Keshlash

Ma'lumotlarni olish, keshlash va xatoliklarni qayta ishlashni hook kompozitsiyasi yordamida soddalashtirish mumkin:

• useFetch(url): Berilgan URL'dan ma'lumotlarni oladi.
• useCache(key, fetchFunction): Kalit yordamida `fetch` funksiyasi natijasini keshlaydi.
• useData(url, options): Ma'lumotlarni olish va natijalarni keshlash uchun useFetch va useCache'ni birlashtiradi.

Bu sizga tez-tez murojaat qilinadigan ma'lumotlarni osongina keshlash va unumdorlikni oshirish imkonini beradi. SWR (Stale-While-Revalidate) va React Query kabi kutubxonalar maxsus hooklar bilan kengaytirilishi mumkin bo'lgan kuchli ma'lumotlarni olish va keshlash yechimlarini taqdim etadi.

4. Autentifikatsiya

Autentifikatsiya mantiqini boshqarish, ayniqsa turli autentifikatsiya usullari (masalan, JWT, OAuth) bilan ishlaganda murakkab bo'lishi mumkin. Hook kompozitsiyasi autentifikatsiya jarayonining turli jihatlarini ajratishga yordam beradi:

• useAuthToken(): Autentifikatsiya tokenini boshqaradi (masalan, uni mahalliy xotirada saqlash va olish).
• useUser(): Autentifikatsiya tokeniga asoslanib, joriy foydalanuvchi ma'lumotlarini oladi va taqdim etadi.
• useAuth(): Boshqa hooklarni birlashtirib, login, logout va signup kabi autentifikatsiyaga oid funksiyalarni taqdim etadi.

Ushbu yondashuv turli autentifikatsiya usullari o'rtasida osongina o'tish yoki autentifikatsiya jarayoniga yangi xususiyatlar qo'shish imkonini beradi. Auth0 va Firebase Authentication kabi kutubxonalar foydalanuvchi hisoblarini va autentifikatsiyani boshqarish uchun backend sifatida ishlatilishi mumkin va bu xizmatlar bilan ishlash uchun maxsus hooklar yaratilishi mumkin.

Maxsus Hook Kompozitsiyasi Uchun Eng Yaxshi Amaliyotlar

• Hooklarni Aniq Maqsadli Qiling: Har bir hook aniq va o'ziga xos maqsadga ega bo'lishi kerak.
• Chuqur Ichma-ichlikdan Saqlaning: Kodingizni tushunish qiyin bo'lib qolmasligi uchun kompozitsiya darajalari sonini cheklang. Agar hook juda murakkablashib ketsa, uni yanada kichikroq qismlarga bo'lishni o'ylab ko'ring.
• Hooklaringizni Hujjatlashtiring: Har bir hook uchun uning maqsadi, kirish va chiqish ma'lumotlarini tushuntiruvchi aniq va ixcham hujjatlarni taqdim eting. Bu, ayniqsa, boshqa dasturchilar tomonidan ishlatiladigan hooklar uchun muhimdir.
• Hooklaringizni Sinovdan O'tkazing: Har bir hookning to'g'ri ishlashiga ishonch hosil qilish uchun unit testlar yozing. Bu, ayniqsa, holatni boshqaradigan yoki qo'shimcha effektlarni (side effects) bajaradigan hooklar uchun muhimdir.
• Holatni Boshqarish Kutubxonasidan Foydalanishni O'ylab Ko'ring: Murakkab holatni boshqarish stsenariylari uchun Redux, Zustand yoki Jotai kabi kutubxonalardan foydalanishni ko'rib chiqing. Bu kutubxonalar holatni boshqarish uchun ilg'or xususiyatlarni taqdim etadi va hooklar kompozitsiyasini soddalashtirishi mumkin.
• Xatoliklarni Qayta Ishlash Haqida O'ylang: Kutilmagan xatti-harakatlarning oldini olish uchun hooklaringizda mustahkam xatoliklarni qayta ishlashni joriy qiling. Xatoliklarni ushlash va ma'lumot beruvchi xato xabarlarini taqdim etish uchun try-catch bloklaridan foydalanishni o'ylab ko'ring.
• Unumdorlikni Hisobga Oling: Hooklaringizning unumdorlikka ta'sirini yodda tuting. Keraksiz qayta renderlardan saqlaning va kodingizni unumdorlik uchun optimallashtiring. Kerakli joylarda unumdorlikni optimallashtirish uchun React.memo, useMemo va useCallback'dan foydalaning.

Xulosa

React maxsus hook kompozitsiyasi murakkab mantiqni abstraksiya qilish va kodni qayta ishlatish, qo'llab-quvvatlash va sinovdan o'tkazish imkoniyatlarini yaxshilash uchun kuchli usuldir. Murakkab vazifalarni kichikroq, boshqarilishi oson bo'lgan hooklarga ajratish orqali siz yanada modulli va tartibli kod bazasini yaratishingiz mumkin. Ushbu maqolada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz mustahkam va kengaytiriladigan React ilovalarini yaratish uchun maxsus hook kompozitsiyasidan samarali foydalanishingiz mumkin. Har doim kodingizda aniqlik va soddalikni birinchi o'ringa qo'yishni unutmang va o'z ehtiyojlaringizga eng mos keladiganini topish uchun turli xil kompozitsiya patternlari bilan tajriba qilishdan qo'rqmang.